﻿<!DOCTYPE html>
<html xmlns:s="http://www.w3.org/1999/XSL/Transform">
<head>
<%
    include("/static/include/title.html"){}
    include("/static/include/css.html"){}
    include("/static/include/js.html"){}
%>
	<script type="text/javascript" src="https://cdn.bootcss.com/ckeditor/4.12.1/ckeditor.js"></script>
	</head>

<body>
<div class="layui-fluid">
	<form id="fUpdate" class="layui-form" action="#" onsubmit="return false" method="post">
		<input type="hidden" id="dialogId" name="dialogId" value="${parameter.dialogId}"/>
		<input type="hidden" name="article.id" value="${article.id}"/>

		<div class="layui-card">
			<!-- 如需要header信息，放开下面的comment -->
			<!-- <div class="layui-card-header">基础信息</div> -->
			<div class="layui-card-body" style="padding: 15px;">
				<!-- 如一行显示多列数据，参照下面的示例 -->
				<!-- 
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">属性1：</label>
						<div class="layui-input-inline">
							<input type="text" autocomplete="off" class="layui-input" maxlength="25" title="属性1对应控件">
						</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">属性2：</label>
						<div class="layui-input-inline">
							<input type="text" autocomplete="off" class="layui-input" maxlength="25" title="属性1对应控件">
						</div>
					</div>
				</div>
				-->
				<!--如果有图片则显示，否则不显示，只显示上传-->

					<div class="layui-form-item">

						<label class="layui-form-label">头像图片:</label>
						<%if(article.imageUrl!=null&&article.imageUrl!=""){%>
						<div style="display: inline-block">
							<img src="${article.imageUrl}" width="100px">
							<a class="layui-btn layui-btn-xs demo-reload deletexs">删除</a>
						</div>
						<%}%>
						<!-- layui上传组件 -->
						<!--当数据库有值时，通过jQury入口函数，隐藏这个组件，id的作用是为了在入口函数中识别这个组件-->
						<div class="layui-upload-drag" id="uploadDiv">
							<i class="layui-icon"></i>
						</div>
						<input type="hidden" id="imageUrl" name="article.imageUrl" value="${article.imageUrl}"/>
					</div>


				<div class="layui-form-item">
					<label class="layui-form-label">信息分类<span style="color:#FF5722;">*</span>：</label>
					<div class="layui-input-block">
						<select name="article.categoryCode">
							<option value="">--请选择--</option>
							<% if(has(categoryList) && categoryList != null) { for(i in categoryList) {%>
							<option value="${i.itemCode}"<% if(article.categoryCode == i.itemCode) {%> selected<%}%>>${i.itemName}</option>
							<%}}%>
						</select>
					</div>
				</div>

	  
				<div class="layui-form-item">
					<label class="layui-form-label">标题<span style="color:#FF5722;">*</span>：</label>
					<div class="layui-input-block">
						<input type="text" name="article.title" placeholder="标题" value="${@team.bangbang.common.utility.LogicUtility.getQuotedString(article.title)}" autocomplete="off" class="layui-input" maxlength="100">
					</div>
				</div>
	  
				<div class="layui-form-item layui-form-text">
					<label class="layui-form-label">信息摘要：</label>
					<div class="layui-input-block">
						<textarea name="article.subTitle" class="layui-textarea" rows="5" placeholder="限250字以内">${@team.bangbang.common.utility.LogicUtility.getQuotedString(article.subTitle)}</textarea>
					</div>
				</div>
				
				<div class="layui-form-item">
					<label class="layui-form-label">正文：<span style="color:#FF5722;">*</span>：</label>
					<div class="layui-input-block">
						<textarea name="article.content">${article.content}</textarea>
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">状态：<span style="color:#FF5722;">*</span>：</label>
					<div class="layui-input-block">

						<input type="radio" name="article.statusFlag" value="1" title="待上架" <% if(article.statusFlag != null && article.statusFlag==1) {%> checked<%}%>/>

						<input type="radio" name="article.statusFlag" value="2" title="已上架" <% if(article.statusFlag != null && article.statusFlag==2) {%> checked<%}%>/>

					</div>
				</div>

			</div>
		</div>
		
		<div class="layui-form-item layui-layout-admin">
			<div class="layui-input-block">
				<div class="layui-footer" style="left: 0;">
					<button class="layui-btn" onclick="doUpdateAction('article');">修 改</button>
				</div>
			</div>
		</div>
	</form>
</div>
<script>
	layui.use(['form','laydate'], function(){
        var form  = layui.form;
        var laydate = layui.laydate;
        
        // 渲染表单radio、select、checkbox
        form.render();

		// 更新时间
		laydate.render({
			elem: '#updateTime',
			format: 'yyyy-MM-dd'
		});
		// 此处直接使用 '../common/ckeditor_4.12.1/config.js' 相对地址仍读不到配置
		var confUrl = getFullUrl('../common/ckeditor_4.12.1/config.js')
		CKEDITOR.replace( 'article.content', {customConfig: confUrl});
    });

	layui.use('upload', function(){
		var upload = layui.upload;
		// 文件上传代码
		// accept：指定允许上传时校验的文件类型，可选值有：
		// images（图片）、file（所有文件）、video（视频）、audio（音频）
		upload.render({
			elem: '#uploadDiv',
			url: '../common/upload',
			accept: 'images',
			done: function(res){
				if(res == null || res.statusCode != 200) {
					return;
				}

				// 返回上传后的文件地址
				var url = res.data;

				// 使用上传后的文件地址
				// 显示上传的文件
				if(url.indexOf("http://") == 0 || url.indexOf("https://") == 0) {
					$(this.elem).after('<div><img src="' + url + '" width="100"/> &nbsp; ' +
							'<a class="layui-btn layui-btn-xs demo-reload deletexs">删除</a>' +
							'</div>');
					$("#imageUrl").val(url);
				} else {
					$(this.elem).after('<div><img src="../common/stream?file=' + url +
							'" width="100"> &nbsp; ' +
							'<a class="layui-btn layui-btn-xs demo-reload deletexs">删除</a>' +
							'</div>');
					$("#imageUrl").val(url);
				}
				// 隐藏上传对话框
				$(this.elem).css('display', 'none');
			}
		});
	});

	// 设置删除按钮触发
	$(document).on("click",".deletexs",function(){
		// 显示当前父节点的前面元素
		$(this).parent().prev().css('display', '');
		//移除要删除的元素
		$(this).parent().remove();
		//用于在删除头像图片后显示隐藏的文件上传按钮
		$("#uploadDiv").show();
		$("#imageUrl").val("");
	});

	//通过jQury入口函数，设置组件状态
	$(document).ready(function(){
		//从数据库中获取图片Url
		var elemId = '${article.imageUrl}';

		if(elemId!=null&&elemId!=""){
			//若数据库中有url，则隐藏上传组件。
			$("#uploadDiv").hide();
		}
	});

	function validate(theForm) {
		// 注意：
		// 如果更改页面表单的控件类型，请在校验判断时做对应修改：
		// 1. 下拉框：使用 $.trim(theForm["控件名称"].value) == ""

		// 2. 单选框/复选框：使用 getChoiceValue("控件名称") == null
		// 
	
		var articleCategoryCode = $.trim(theForm["article.categoryCode"].value);
		if(articleCategoryCode == "") {
			$.message("请选择分类编码，关联config_item_base.ItemCode[Category=信息分类]！");
			return false;
		}
	
		if($.trim(theForm["article.title"].value) == "") {
			$.message("标题不能为空！");
			return false;
		}

		//将取出来的值交给后台传到数据库
		// 获得Editor IFrame
		var oEditor = CKEDITOR.instances["article.content"];
		//console.log(1);
		//console.log(oEditor);
		var strHtml = $.trim(oEditor.getData());
		//console.log(strHtml);
		if(strHtml == "") {
			alert("请输入正文内容！");
			return false;
		}
		theForm["article.content"].value = strHtml;
		return true;
	}


</script>
</body>
</html>
